<template>
	<div class="edit_group">
		<x-header title="顾客分析/顾客分组" :left-options="{backText: ''}">
		</x-header>
		<div class="content">
			<div class="active_customer">
				<div class="customer_title">
					<p>活跃顾客</p>
					<span>最近一次成交在近</span>
				</div>
				<div class="input_one">
					<p>{{ input1 }}天</p>
					<span>至</span>
					<p @click="select1">{{ input2 }}天</p>
				</div>
				<div class="select_day" v-if="show1">
					<div class="text">
						<span @click="show1=false">取消</span>
						<h5>请选择</h5>
						<p @click="finish1">完成</p>
					</div>					
					<picker :data='years1' v-model='year1' @on-change='change1'></picker>
				</div>
			</div>
			<div class="active_customer">
				<div class="customer_title">
					<p>沉默顾客</p>
					<span>最近一次成交在近</span>
				</div>
				<div class="input_one">
					<p>{{ input3 }}天</p>
					<span>至</span>
					<p @click="select2">{{ input4 }}天</p>
				</div>
				<div class="select_day" v-if="show2">
					<div class="text">
						<span @click="show2=false">取消</span>
						<h5>请选择</h5>
						<p @click="finish2">完成</p>
					</div>					
					<picker :data='years2' v-model='year2' @on-change='change2'></picker>
				</div>
			</div>
			<div class="active_customer">
				<div class="customer_title">
					<p>流失顾客</p>
					<span>最近一次成交在近</span>
				</div>
				<div class="input_one">
					<p>{{ input5 }}天</p>
					<span>至</span>
					<p @click="select3">{{ input6 }}天</p>
				</div>
				<div class="select_day" v-if="show3">
					<div class="text">
						<span @click="show3=false">取消</span>
						<h5>请选择</h5>
						<p @click="finish3">完成</p>
					</div>					
					<picker :data='years3' v-model='year3' @on-change='change3'></picker>
				</div>
			</div>
			<div class="conclude">系统暂时支持统计1-120天内顾客数据</div>
			<x-button style="width:92%;background:#02c1af;color:#fff;">立即保存</x-button>
			<div class="defaults" @click="defaults">恢复至默认分组</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Picker, Group, GroupTitle, XButton } from 'vux';	
	export default {
		name: 'edit_group',
		data() {
			let years1 = [];	
			let years2 = [];	
			let years3 = [];	
			for(let i = 1;i <= 8;i++ ){
				years1.push(i*15);
				years2.push(i*15);
				years3.push(i*15);
			}
			return {
				years1: [years1],//下拉数组
				year1: ['30'],//默认值
				show1: false,
				input1: 1,
				input2: 30,
				input_2: 0,
				years2: [years2],
				year2: ['60'],
				show2: false,
				input3: 30,
				input4: 60,
				input_4: 0,
				years3: [years3],
				year3: ['90'],
				show3: false,
				input5: 60,
				input6: 90,
				input_6: 0,
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Picker,
			Group,
			GroupTitle,
			XButton 
		},
		computed: {

		},
		created() {

		},
		methods: {
			//选择活跃顾客时间
			select1(){
				this.show1 = true;
			},
			//完成
			finish1(){
				this.show1 = false;
				this.input2 = this.input_2;
			},
			change1(value) {
				this.input_2 = +value.join();				
			},			
			select2(){
				this.show2 = true;
			},
			//完成
			finish2(){
				this.show2 = false;
				this.input4 = this.input_4;
			},
			change2(value) {
				this.input_4 = +value.join();				
			},
			select3(){
				this.show3 = true;
			},
			//完成
			finish3(){
				this.show3 = false;
				this.input6 = this.input_6;
			},
			change3(value) {
				this.input_6 = +value.join();				
			},
			//恢复默认
			defaults(){
				this.input2 = 30;
				this.input4 = 60;
				this.input6 = 90;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.edit_group {
		background: #fff;
		.content {
			.active_customer{
				padding: .54rem 0 .36rem .3rem;
				border-bottom: 1px solid #f0f0f0;
				.customer_title{
					display: flex;
					align-items: center;
					p{
						font-size: .36rem;
						color: #363636;
					}
					span{
						font-size: .28rem;
						color: #8c8c8c;
						margin-left: .28rem;
					}
				}
				.input_one{
					display: flex;
					align-items: center;
					margin-top: .4rem;					
					p{
						text-align: left;
						width: 2.34rem;
						height: .68rem;
						line-height: .68rem;
						border: 1px solid #f0f0f0;
						border-radius: .1rem;
						padding-left: .16rem;
					}
					p:nth-of-type(1){
						color: #cecece;
					}
					p:nth-of-type(2){
						color: #909090;
					}
					span{
						font-size: .28rem;
						color: #ddd;
						margin: 0 .36rem;
					}
				}
				.select_day{
					width: 7.5rem;					
					position: fixed;
					bottom: 0;
					left: 0;
					background: #fff;
					z-index: 9999;
					.text{
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #f0f0f0;
						padding: .24rem .3rem;
						span{
							font-size: .32rem;
							color: #8e8e8e;
						}
						h5{
							font-size: .34rem;
							color: #181818;
						}
						p{
							font-size: .34rem;
							color: #00b294;
						}
						
					}
				}
			}
			.conclude{
				font-size: .28rem;
				color: #969696;
				text-align: right;
				padding: .34rem .3rem .94rem 0;
			}
			.defaults{
				font-size: .34rem;
				color: #909090;
				text-align: right;
				padding: .88rem .3rem .7rem 0;
				text-decoration: underline;
			}
		}
	}
</style>